<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>GradeSearch</title>
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/scoreshow.js" th:src="@{/js/scoreshow.js}" ></script>
</head>
<body>



</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #ffffffff;
        }
        .title {
            text-align: center;
            height: 80px;
            line-height: 80px;
            background-color: #319eec;
            font-weight: 600;
        }
        #main {
            height: 600px;
            /* background-color: #dc9090; */
            padding: 0 0 0 480px;
            position: relative;
        }
        .queryGrade {
            height: 40px;
            width: 64%;
            line-height: 40px;
            /* padding-left: 250px; */
            border-bottom: 1px solid #000;
            margin-bottom: 16px;
            text-align: center;
        }
        .spanDesc {
            margin-left: 36px;
            font-size: 18px;
        }
        input {
            width: 140px;
            height: 24px;
            padding-left: 6px;
        }
        #stuId {
            margin-right: 50px;
        }
        #name {
            width: 120px;
        }
        #btn {
            margin-left: 50px;
            height: 24px;
            width: 80px;
        }
        #aside {
            width: 200px;
            height: 660px;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 1px;
            background-color: #8dc6ee;
        }
        #aside ul li {
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        #aside ul li a {
            display: block;
            width: 100%;
            height: 97%;
            text-decoration: none;
            font-size: 18px;
            background-color: #e1eef7;
            color: #000;
        }
        #aside ul li a:hover {
            background-color: #319eec;
        }
        .tab {
            background-color: #f5fefb;
            margin: 80px 0 0 -180px;
             /*display: none; */
            border: 1px solid #000;
            width: 1122px;
            border-collapse:collapse;
            
        }
        .tab tr td span {
            font-size: 14px;
            display: block;
            width: 100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            border: 1px solid #000;
            border-collapse:collapse
        }
        .tab tr:nth-child(2n-1) span{
            line-height: 40px;
        }
        .tab tr:nth-child(1) td:nth-child(-n+4) span,
        .tab tr:nth-child(1) td:nth-child(7) span,
        .tab tr:nth-child(1) td:nth-child(8) span,
        .tab tr:nth-child(1) td:nth-child(9) span,
        .tab tr:nth-child(1) td:nth-child(10) span,
        .tab tr:nth-child(1) td:nth-child(11) span,
        .tab tr:nth-child(3) td:nth-child(5) span,
        .tab tr:nth-child(3) td:nth-child(8) span,
        .tab tr:nth-child(3) td:nth-child(10) span
        {
            line-height: 80px;
        }
        #longest {
            line-height: 26px;
        }
    </style>
</head>

<body>
    <h1 class="title">学生成绩管理系统</h1>
    <div id="main">
        <div id="aside">
            <ul>
                <li class="row"><a href="#">掌上校园</a></li>
                <li class="row"><a href="#">学生学籍</a></li>
                <li class="row"><a href="#">培养方案</a></li>
                <li class="row"><a href="#">网上选课</a></li>
                <li class="row"><a href="#">教学安排</a></li>
                <li class="row"><a href="#">考试安排</a></li>
                <li class="row"><a href="#">学生成绩</a></li>
                <li class="row"><a href="#">其它</a></li>
            </ul>
        </div>
        <h3 class="queryGrade">成绩查询</h3>
        <span class="spanDesc">学号：</span><input type="text" id="stu_id" placeholder="请输入学号">
        <span class="sapnDesc">姓名：</span><input type="text" id="stu_name" placeholder="请输入姓名">
        <button id="btn" onclick="scoresearch()">查询成绩</button>
        <table class="tab">
            <tr id="test1"></tr>
            <tr id="test2"></tr>
        </table>
    <script>
        var btn=document.querySelector("#btn");
        var tab=document.querySelector(".tab");
        var stuId=document.querySelector("#stuId");
        var name=document.querySelector("#name");
        // 表格默认为隐藏 输入学号姓名正确时点击按钮后显示
        btn.addEventListener("click",function(){
            if(stuId.value==""||name.value==""){
                alert("请输入学号或姓名!")
            }
            // 判断是否与数据库数据对应
            if(1){
                tab.style.display="block";
            }else {
                alert("学号或姓名错误!");
            }
        })
    </script>
    </div>
</body>

</html>